<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		   <!-- <script type="text/javascript"> -->
			<!-- // window.onload=function(){
			// var btn=document.querySelector("button");
			// 	btn.onclick=function(){
			// 		var box=document.querySelector(".box");
			// 		box.style.display="flex";
			// 	}
			// 	var close=document.querySelector(".close");
			// 	close.onclick=function(){
			// 		var box=document.querySelector(".box");
			// 		box.style.display="none";
			// 	}
			// }
			//	document.querySelectorAll()	找全部
			//	配合 遍历使用  找到所以button
			//	document.querySelector()找一个
		</script> -->
		<script type="text/javascript">
			window.onload=function(){
				var forms=document.querySelectorAll(".box .text form");
				var btns=document.querySelectorAll(".box .title a");
				for (var i = 0; i < btns.length; i++) {
					btns[i].onclick=function(){
						for (var j = 0; j < btns.length; j++) {
							  btns[j].className="";
							 }
							 this.className="active";   
							 
							 var idx =this.attributes["data-idx"].value;
							 for (var j = 0; j < forms.length; j++) {
							 	forms[j].style.display="none";
							 }
							  forms[idx].style.display="block";
						 }
				}
			}
		</script>
	</head>
	<body>
		<!-- <button type="button">显示登录框</button>
			<div class="box">
				<div class="content">
				  <span class="close">&times;</span>
				</div>
			</div> -->
			<div class="content">
				<div class="box">
					<div class="right">
						<div class="title">
							<a href="#" class="active" data-idx="0">登录</a>
							<a href="#" data-idx="1">注册</a>
						</div>
					<div class="text">
					<form action="#" method="get">
						<div>
							<input type="text" name="name" id="" value="" class="zc" placeholder="   请输入手机号或邮箱"/>
						</div>
						<div>
							<input type="password" name="pwd" id="" value=""  class="zc" placeholder="   请输入密码" />
						</div>
						<div>
							<input type="checkbox" name="chk" id="chk" value=""  checked="checked" />
							<label for="chk" style="font-size: 14px;" >自动登录</label>
						</div>
						<div>
						<a href="index.html"><input type="submit" value="登录"/></a>	
						</div>
					</form>
						<form action="#" method="get">
							<div>
								<input type="text" name="name" id="" value="" class="zc" placeholder="   请输入手机号或邮箱"/>
							</div>
							<div> 
								<input type="password" name="pwd" id="" value="" class="zc" placeholder="   请输入密码"/>
							</div>
							<div >
								<input type="tel"  name="yzm" id="" value="" class="zc" placeholder="   请输入验证码"/>
								<button type="button">获取验证码</button> 
							</div>
							
							<div>
								<input type="submit" value="立即注册"/>
							</div>
							<div>
								<input type="checkbox" name="chk" id="chk" value=""   checked="checked" />
								<label for="chk" class="zc" >我已阅读并同意《音乐Tai服务条款》</label>
							</div>
							
					</form>
					
					</div>
				</div>
			</div>
			</div>
	</body>
</html>
